<!DOCTYPE html>
<html>
<body>

<h1>My first SVG</h1>

<svg style="width: 100%; height: 300px;">
  <defs>
  	<pattern id="grid4" width="80" height="80" patternUnits="userSpaceOnUse">
  		<path d="M 80 10 L 0 10 0 10" fill="none" stroke="#e0e0e0" stroke-width="0.5"/>
  		<path d="M 80 20 L 0 20 0 20" fill="none" stroke="#e0e0e0" stroke-width="0.5"/>
  		<path d="M 80 0 L 0 0 0 80" fill="none" stroke="#e0e0e0" stroke-width="1"/>
  	</pattern>
	<filter id="grid2" primitiveUnits="userSpaceOnUse" x="0%" y="0%" width="100%" height="100%">
		<feFlood x="0%" y="0%" width="100%" height="1" flood-color="#e0e0e0" result="hline"/>
		<feFlood x="0%" y="0%" width="1" height="100%" flood-color="#e0e0e0" result="vline"/>
		<feComposite x="0%" y="0%" height="10" width="10" operator="over" in="hline" in2="vline" result="grid-tile"/>
		<feTile in="grid-tile" x="0%" y="0%" width="100%" height="100%"/>
	</filter>
  </defs>

  <rect x="0" y="0" width="200" height="100" stroke="green" fill="url(#grid4)"/>
  <rect x="220" y="0" width="200" height="100%" stroke="green" filter="url(#grid2)"/>
  
</svg>
<br>
Test
<svg style="width: 100%; height: 300px;">
	<filter id="tiled" filterUnits="userSpaceOnUse">
        <feImage width="20" height="20" xlink:href=""/>
        <feTile in="texture"/>
     </filter>

  <rect x="200" y="0" width="200" height="100" filter="url(#tiled)"/>
</svg>
</body>
</html>
